<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.title">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" :style="{ backgroundColor: card.color }">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ card.value }}</div>
              <div class="stats-title">{{ card.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 系统信息 -->
      <el-col :xs="24" :md="12">
        <el-card title="系统信息">
          <template #header>
            <span>系统信息</span>
          </template>
          <div class="system-info">
            <div class="info-item">
              <span class="label">操作系统:</span>
              <span class="value">Linux Ubuntu 20.04</span>
            </div>
            <div class="info-item">
              <span class="label">CPU使用率:</span>
              <el-progress :percentage="cpuUsage" :color="getProgressColor(cpuUsage)" />
            </div>
            <div class="info-item">
              <span class="label">内存使用率:</span>
              <el-progress :percentage="memoryUsage" :color="getProgressColor(memoryUsage)" />
            </div>
            <div class="info-item">
              <span class="label">磁盘使用率:</span>
              <el-progress :percentage="diskUsage" :color="getProgressColor(diskUsage)" />
            </div>
            <div class="info-item">
              <span class="label">运行时间:</span>
              <span class="value">{{ uptime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 快捷操作 -->
      <el-col :xs="24" :md="12">
        <el-card title="快捷操作">
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <el-button
              v-for="action in quickActions"
              :key="action.name"
              :type="action.type"
              :icon="action.icon"
              @click="handleQuickAction(action.action)"
              class="action-btn"
            >
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 最近活动 -->
      <el-col :span="24">
        <el-card title="最近活动">
          <template #header>
            <span>最近活动</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :color="activity.color"
            >
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-desc">{{ activity.description }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  User, 
  UserFilled, 
  Key, 
  Monitor,
  Plus,
  Setting,
  View,
  Refresh
} from '@element-plus/icons-vue'

// 统计卡片数据
const statsCards = ref([
  {
    title: '用户总数',
    value: '156',
    icon: 'User',
    color: '#409EFF'
  },
  {
    title: '角色数量',
    value: '8',
    icon: 'UserFilled',
    color: '#67C23A'
  },
  {
    title: '权限数量',
    value: '24',
    icon: 'Key',
    color: '#E6A23C'
  },
  {
    title: '在线用户',
    value: '32',
    icon: 'Monitor',
    color: '#F56C6C'
  }
])

// 系统资源使用率
const cpuUsage = ref(45)
const memoryUsage = ref(68)
const diskUsage = ref(32)
const uptime = ref('7天 12小时 35分钟')

// 快捷操作
const quickActions = ref([
  {
    name: '添加用户',
    type: 'primary',
    icon: Plus,
    action: 'addUser'
  },
  {
    name: '系统设置',
    type: 'success',
    icon: Setting,
    action: 'systemSettings'
  },
  {
    name: '查看日志',
    type: 'warning',
    icon: View,
    action: 'viewLogs'
  },
  {
    name: '刷新数据',
    type: 'info',
    icon: Refresh,
    action: 'refreshData'
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    title: '用户登录',
    description: '管理员 admin 登录系统',
    time: '2024-01-15 14:30:25',
    color: '#409EFF'
  },
  {
    id: 2,
    title: '创建角色',
    description: '创建了新角色 "运维工程师"',
    time: '2024-01-15 13:45:12',
    color: '#67C23A'
  },
  {
    id: 3,
    title: '权限更新',
    description: '更新了用户管理权限配置',
    time: '2024-01-15 12:20:08',
    color: '#E6A23C'
  },
  {
    id: 4,
    title: '系统备份',
    description: '执行了系统数据备份任务',
    time: '2024-01-15 10:15:30',
    color: '#909399'
  }
])

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67C23A'
  if (percentage < 80) return '#E6A23C'
  return '#F56C6C'
}

// 处理快捷操作
const handleQuickAction = (action: string) => {
  switch (action) {
    case 'addUser':
      ElMessage.info('跳转到用户管理页面')
      break
    case 'systemSettings':
      ElMessage.info('跳转到系统设置页面')
      break
    case 'viewLogs':
      ElMessage.info('跳转到日志管理页面')
      break
    case 'refreshData':
      refreshDashboardData()
      break
  }
}

// 刷新仪表盘数据
const refreshDashboardData = () => {
  ElMessage.success('数据刷新成功')
  // 这里可以添加实际的数据刷新逻辑
}

// 组件挂载时加载数据
onMounted(() => {
  // 这里可以添加实际的数据加载逻辑
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats-card {
  margin-bottom: 20px;
}

.stats-content {
  display: flex;
  align-items: center;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stats-icon .el-icon {
  font-size: 24px;
  color: white;
}

.stats-info {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.stats-title {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  width: 100px;
  color: #666;
  font-size: 14px;
}

.info-item .value {
  color: #333;
  font-weight: 500;
}

.info-item .el-progress {
  flex: 1;
  margin-left: 16px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.action-btn {
  width: 100%;
  height: 50px;
}

.activity-content {
  padding-left: 10px;
}

.activity-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.activity-desc {
  font-size: 13px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
  }
  
  .stats-content {
    flex-direction: column;
    text-align: center;
  }
  
  .stats-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item .el-progress {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}
</style>
